<template>
  <div class="window">
    <!--轮播图-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../../assets/Fransnana/haipao_mamabibei.png" alt=""></div>
        <div class="swiper-slide"><img src="../../../assets/Fransnana/haipao_mamabibei.png" alt=""></div>
        <div class="swiper-slide"><img src="../../../assets/Fransnana/haipao_mamabibei.png" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="dayreco"></div>
    <!--奶粉专区-->
    <div class="area">
      <p class="meizhu"><span>——</span> 奶粉专区 <span>——</span></p>
      <router-link :to="{name: 'home/recommend'}"><img src="../../../assets/Fransnana/mmbb.jpg" alt="" class="noimg"></router-link>
      <div class="xitop">
          <div class="fenlei" v-for="item in ibhun">
            <router-link :to="{name: 'product', params: {productImg: item.img, productPrice: 10, isPrice: item.price, isTxt: item.name, wid: item.ID}}"><img :src="item.img" alt=""></router-link>
            <p>{{item.name}}</p>
            <p>{{item.price}}</p>
          </div>
      </div>
    </div>
    <div class="dayreco"></div>
    <!--纸尿裤专区-->
    <div class="area">
      <p class="meizhu"><span>——</span> 纸尿裤专区 <span>——</span></p>
      <router-link :to="{name: 'home/recommend'}"><img src="../../../assets/Fransnana/zhiniaozhuanqu.png" alt="" class="noimg"></router-link>
      <div class="xitop">
        <div class="fenlei" v-for="item in ichun">
          <router-link :to="{name: 'product', params: {productImg: item.img, productPrice: 10, isPrice: item.price, isTxt: item.name, wid: item.ID}}"><img :src="item.img" alt=""></router-link>
          <p>{{item.name}}</p>
          <p>{{item.price}}</p>
        </div>
      </div>
    </div>
    <!--以下版块...-->
    <div class="ponetin">以下再有版块跟上面版块一样</div>
    <!--猜你喜欢-->
    <p class="meizhu">猜你喜欢</p>
    <ul class="uls">
      <li class="lis">
        <router-link :to="{path: '/home'}">
          <img src="../../../assets/Gourment/yeshenglanmei.png" alt="">
          <p>野生蓝莓果汁饮料</p>
          <p>¥100</p>
        </router-link>
      </li>
      <li class="lis">
        <router-link :to="{path: '/home'}">
          <img src="../../../assets/Gourment/yuanweijianguo.png" alt="">
          <p>原味坚果</p>
          <p>¥99</p>
        </router-link>
      </li>
    </ul>
    <!--加载更多-->
    <div class="ponetino">加载更多</div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import * as $ from 'jquery'
  import * as Swiper from 'swiper'
  import MyFooter from '../MyFooter/MyFooter.vue'
  import Vue from 'vue'
  export default {
//    轮播图
    mounted() {
      new Swiper['default'] ('.swiper-container', {
        loop: true,
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        autoplay:true,
      });
      this.doGet();
      this.owGet();
    },
    components: {
      MyFooter,
    },
    data() {
      return {
        ibhun: [],
        ichun: []
      }
    },
    methods: {
      doGet() {
        Vue.axios.get('/goods/fransnana').then((res) => {
          this.ibhun = res.data;
        })
      },
      owGet() {
        Vue.axios.get('/goods/frans').then((res) => {
          this.ichun = res.data;
        })
      }
    }
  }
</script>
<style scoped>
  @import "../../../../node_modules/swiper/dist/css/swiper.css";
  .swiper-container {
    font-size: 0;
  }
  .swiper-container img {
    width: 100%;
  }
  .dayreco {
    width: 100%;
    height: 1rem;
    background: rgb(242, 242, 242);
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  .meizhu {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 300;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
  .area {
    width: 30rem;
    margin: auto;
  }
  .noimg {
    width: 100%;
  }
  .xitop {
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  .fenlei {
    width: 8rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
  }
  .fenlei p:nth-child(3) {
    color: red;
  }
  .xitop img {
    width: 90%;
  }
  .xitop div:nth-child(3n + 2) {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
  }
  .ponetino,
  .ponetin {
    margin-top: .5rem;
    font-size: 1rem;
    background: rgb(242, 242, 242);
    height: 2.5rem;
    line-height: 3rem;
    color: red;
    padding-left: 2rem;
  }
  .ponetino {
    color: #cccccc;
    text-align: center;
    margin-bottom: 6rem;
  }
  .uls {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .lis {
    width: 14.5rem;
    border: 1px solid #cccccc;
    text-align: center;
    position: relative;
    margin-bottom: 0.8rem;
  }
  .lis img {
    height: 7rem;
  }
  .lis p:nth-child(2) {
    margin-top: 1rem;
    font-size: 1.2rem;
  }
  .lis p:nth-child(3) {
    margin-top: 0.3rem;
    color: red;
    font-size: 1.2rem;
  }
</style>
